<template>
  <div>
    <headers @currentindexs="currentindexs" @parameterid="parameterid"></headers>
    <div class="product min-width ggbgc" v-loading="loading">
      <div v-for="(item,index) in media" :key="index">
        <div v-if="item.type === 'image'" class="product-picture-a">
          <img :src="item.src">
        </div>
        <div v-else class="video-box">
          <!-- muted: 为静音播放 -->
          <video class="video"
          x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-playsinline=""
          playsinline webkit-playsinline="" :playOrPause="playOrPause"
          x-webkit-airplay="allow" @click="pauseVideo" @ended="onPlayerEnded">
            <source :src="item.src" type="video/mp4">
            <source :src="item.src" type="video/ogg">
            <source :src="item.src" type="video/webm">
            <object :data="item.src">
              <embed :src="item.src">
            </object>
          </video>
          <div v-show="Play" @click="videoPlay" class="video-icon">
            <img src="../../assets/bofang.png" alt="">
          </div>
        </div>
      </div>
      <div class="channel">
        <p class="channel-title">{{$t('message.Multiplewaystobuy')}}</p>
        <i class="channel-i"></i>
        <p class="channel-title-a">{{$t('message.Lookingforwardtoyourfavor')}}</p>
        <div class="channel-content clear">
          <div class="channel-content-img" v-for="(item,index) in link" :key="index">
           <img @click="channels(item.link)" :src="item.img_src">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import headers from "@/components/public/header"
  export default {
    components: {
      headers
    },
    name: 'products',
    inject: ['reload'],
    data() {
      return {
        lang:'en',
        id: 0,   //参数初始值
        equipment: 'pc',
        link: [],
        media: [],
        loading: true,  //加载
        Play: true,  //视频
        playOrPause: true, //视频
      }
    },
    //接口
    created() {
      if (sessionStorage.sitename) {
        this.lang =  sessionStorage.sitename;
      }
      //如果点击产品有值则进行赋值请求
      if (this.$route.query.productid) {
        this.id = parseInt(this.$route.query.productid);
        this.init();
      }
    },
    methods: {
      // 请求数数据
      init() {
        if (sessionStorage.sitename) {
          this.lang = sessionStorage.sitename;
        }
          axios.get('product/api/get_product', {
            params: {
              language: this.lang,
              id: this.id,
              equipment: this.equipment
            }
          }).then((response) => {
            this.link = response.data.link;
            this.media = response.data.media;
            this.loading = false;
          })
            .catch(function (error) {
              console.log(error);
            });
      },
      pauseVideo() {  //暂停\播放
        let video = document.querySelector('video');
        if (this.playOrPause) {
          video.pause();
          this.Play = true;
        } else {
          video.play();
          this.Play = false;
        }
        this.playOrPause = !this.playOrPause
      },
      videoPlay(event) {
        let video = document.querySelector('video');
        this.Play = false
        video.play();
        //进入全屏
        window.onresize = function () {
          video.style.width = window.innerWidth + 'px';
          video.style.height = window.innerHeight + 'px';
        }
      },
      //视频结束
      onPlayerEnded() {
        this.Play = true
      },
      // 如果从子组件传过来有值则进行赋值请求
      parameterid(id){
        this.id = id;
        this.init();
      },
      currentindexs(){
        this.reload()
      },
      channels(url){
       if(url.substr(0,7).toLowerCase() == "http://" || url.substr(0,8).toLowerCase() == "https://"){
         window.open(url)
       }else
        window.open('http://'+ url)
      },
    },
  }
</script>
<style scoped>
  .product .product-picture-a {
    max-width: 100%;
    height: auto;
  }

  .product .product-picture-a  img {
    width: 100%;
    height: auto;

  }
  .video-box{
    position: relative;
  }
  .video-box .video {
    width: 100%;
    height: 100%;
  }
  .video-box .video-icon{
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
  }
  .video-box .video-icon img{
    width: 100%;
    min-height: 100%;
  }

  .product .channel {
    text-align: center;
    padding: 60px 0 60px 0;
  }

  .product .channel .channel-title {
    font-size: 48px;
    color: #332c2b;
  }

  .product .channel .channel-i {
    width: 28px;
    height: 2px;
    background: #000;
    display: inline-block;
  }

  .product .channel .channel-title-a {
    font-size: 30px;
    color: #332c2b;
    margin-top: 10px;
  }

  .product .channel .channel-content {
    width: 1200px;
    padding-top: 40px;
    margin: 0 auto;
  }

  .product .channel .channel-content .channel-content-img {
    width: 100px;
    height: 101px;
    overflow: hidden;
    border-radius: 50%;
    display: inline-block;
    margin-right: 60px;
    margin-top: 30px;
    cursor: pointer;
  }

  .product .channel .channel-content .channel-content-img:last-child {
    margin-right: 0;
  }

  .product .channel .channel-content .channel-content-img img {
    width: 100%;
    min-height: 100%;
    display: inline-block;
  }
</style>
